<template>
	<div>
		<!-- <div class="login" v-if="!loginSuccess" @click="showLogin"> -->
		<div class="login" v-if="!loginSuccess">
	      <img src="../assets/image/log.png" alt="头像" class="headpic">
	      <h6>Hello,您好!</h6>
	      <div class="btn" ref="btn" id="btn">
	        <!-- <button class="btn-button" @click.stop="logShow += 1">登录</button>
	        <button class="btn-button" @click.stop="logShow += 1">注册</button> -->
	        <button class="btn-button" @click.stop="showLogModel(1)">登录</button>
	        <button class="btn-button" @click.stop="showLogModel(2)">注册</button>
	        <!-- <button class="btn-button" @click.stop="personal">注册</button> -->
	      </div>
	    </div>
	    <!-- 登录成功后 -->
	    <div class="success login" v-if="loginSuccess">
	      <img :src="loginInfo.detail.headPortrait" :onerror="errorImg" alt="头像" class="headpic">
	      <h6>Hello,{{loginInfo.detail.nickname}}!</h6>
	      <el-button type="primary" @click="logOf">退出</el-button>
	      <!-- 下面内容 -->
	      <div class="v_bottom">
	          <section class="con1">
	              <div class="top">
	                <img src="../assets/image/p2.png" alt="">
	                发布 : <em>{{loginInfo.detail.deployCount}}</em>
	              </div>
	              <div class="top">
	                <img src="../assets/image/p3.png" alt="">
	                粉丝 : <em>{{loginInfo.detail.beFollowedCount}}</em>
	              </div>
	          </section>
	          <section class="con1">
	              <span class="center">
	                新消息 : <em>{{loginInfo.detail.dynamicCount}}</em>
	              </span>
	              <span class="center">
	                关注 : <em>{{loginInfo.detail.followCount}}</em>
	              </span>
	              <span class="center">
	                收藏 : <em>{{loginInfo.detail.collectCount}}</em>
	              </span>
	          </section>
	      </div>
	    </div>
	    <div v-if="logShow">
	      <div class="shandow" @click="logShow -= 1"></div>
	      <article class="logbox">
	        <div class="log-title">
	          <span @click="isLogin=true" :class="{'choose':isLogin}">登录</span>
	          <span @click="isLogin=false" :class="{'choose':!isLogin}">注册</span>
            <span class="close" @click="logShow -= 1">x</span>
	        </div>
	        <!-- 注册 -->
	        <div class="box-main" v-if="!isLogin">
	          <p class=""><img src="../assets/image/tel.png"><input type="text" placeholder="用户登录名" v-model="userName"></p>
	          <p class=""><img src="../assets/image/nick.png"><input type="text" placeholder="昵称" v-model="nickname"></p>
	          <p class=""><img src="../assets/image/tel.png"><input type="tel" placeholder="手机号" v-model="r_phone"></p>
	          <p class=""><img src="../assets/image/code.png"><input type="tel" placeholder="验证码" v-model="verifyCode"><span class="border-left a-code" @click="getVerify">获取验证码</span></p>
	          <p class=""><img src="../assets/image/pass.png"><input type="password" placeholder="设置登录密码" v-model="r_psd"></p>
	        </div>
	        <!-- 登录 -->
	        <div class="box-main" id="login" v-if="isLogin">
	          <p class=""><img src="../assets/image/tel.png"><input type="tel" placeholder="请输入手机号/邮箱" v-model="loginName"></p>
	          <p class=""><img src="../assets/image/pass.png"><input type="password" placeholder="请输入密码" v-model="l_psd"></p>
	          <router-link to="/findpass" class="findpass" tag="div">
	            <img src="../assets/image/pass.png">忘记密码
	          </router-link>
	        </div>
	        <button class="log-btn" v-if="isLogin" @click="login">登录</button>
	        <button class="log-btn" v-if="!isLogin" @click="register">注册</button>
	        <div class="log-link border-top">
	          <span class="log-link-text">第三方登录</span>
	          <img src="../assets/image/qq.png">
	          <img src="../assets/image/朋友圈.png">
	          <img src="../assets/image/新浪.png">
	        </div>
	      </article>
		</div>
	</div>
</template>

<script>
import Service from "@/service/service";
	export default {
    name:"login",
    props:['hasLogin'],
		data(){
			return {
			  logShow: 0,
		      isLogin: false,
		      choose: "choose",
		      // 控制登录显示隐藏
		      loginSuccess:false,
          dialogVisible: false,
          r_phone:'',
          nickname:'',
          verifyCode:'',
          r_psd:'',
          l_psd:'',
          loginName:'',
          userName:'',
				  userId:sessionStorage.getItem("userId")||0,
				  errorImg:'this.src="' + require('../assets/image/pg1.png') + '"',
          loginInfo:localStorage.getItem("loginInfo")
			}
    },
    mounted () {
      const userId =this.userId ;
      if(userId != '' && userId !=null){
        this.loginInfo = JSON.parse(this.loginInfo);
        this.loginSuccess = true
      }

    },
		methods:{
      showLogModel(id){
        // 加载登录 弹框
        this.logShow+= 1;
        if(id == 1){
          this.isLogin = true
        }else{
          this.isLogin = false
        }
      },
			logOf(){
		      this.$confirm('您确定要退出吗?, 是否继续?', '提示', {
		        confirmButtonText: '确定',
		        cancelButtonText: '取消',
		        type: 'warning'
		      }).then(() => {
		        this.loginSuccess=false;
		        this.$message({
		          type: 'success',
		          message: '退出成功!'
            });
            sessionStorage.removeItem("userId")
            localStorage.removeItem("loginInfo");
            this.$emit("catchLoginStus",false)
            // location.reload()
            // this.$router.go(0)
		      }).catch(() => {
		        this.$message({
		          type: 'info',
		          message: '已取消退出'
		        });
		      });

		    },
		    showLogin(){
		      this.loginSuccess=true;
		    },
		    personal(){
		       this.$router.push({
		          path: "/loged"
		       });
        },
        login (){
          var _this = this;
           // 登录接口
          let loginData = {
            param: {
              detail: {
                userName: this.loginName,
                password: this.l_psd
              }
            }
          };
          Service.myAjax(
            {
              method: "post",
              url: Service.baseUrl + "/SystemController/login",
              data: loginData
            },
            function(response) {
              console.log(response)
              let data = response.data;
              if(data.resultCode==0){
                // 登录成功
                let result = data.data;
                _this.loginInfo = result;
                const userId = result.detail.userId;
                _this.$emit('listenLoginData',result)
                sessionStorage.setItem("userId",userId)

                localStorage.setItem("loginInfo",JSON.stringify(result))
                _this.loginSuccess =true;
                // _this.$router.push({
                //   name: 'loged'
                // })
                _this.logShow = false;

                _this.$emit("catchLoginStus",true);
              }else{

                _this.loginSuccess =false;
              }

            },
            function(error) {}
          );
        },
        getVerify (){
          // 获取验证码
          const tel= this.r_phone;
          let getVerifyData = {
            param: {
              type: 1,
              phone: tel
            }
          };
          Service.myAjax(
            {
              method: "post",
              url: Service.baseUrl + "/user/getVerifyCode",
              data: getVerifyData
            },
            function(response) {
              console.log(response)
              // 是评论数据，由于接口没有返回值，须在调试
            },
            function(error) {}
          );

        },
        register () {
          // 注册接口
          let registerData = {
            param: {
              user: {
                nickname : this.nickname,
                phone: this.r_phone,
                verifyCode: this.verifyCode,
                userName:this.userName,
                password: this.r_psd
              }
            }
          }

          Service.myAjax(
            {
              method: "post",
              url: Service.baseUrl + "/SystemController/register",
              data: registerData
            },
            function(response) {
              console.log(response)
            },
            function(error) {}
          );
        }
    },
    watch:{
      phoneNumber(oldVal,newVal){
        console.log(oldVal,newVal)
      }
    }
	}
</script>
<style lang="stylus" scoped>
@import '~styles/variables';
.login {
    background-color: $mainBgc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 2.8rem;
    border-bottom: 2px solid $logoColor;
    margin-top: 0.25rem;
    position:relative;
    .el-button{
      position:absolute;
      top:20px;
      right:20px;
    }
    .v_bottom{
      font-size:16px;
      color:#666;
      width: 90%;
      margin:0 auto;
      .con1{
        display:flex;
        justify-content:space-around;
        font-size: 14px;

        em{
          color:#F56C6C;
        }
        img{
          width:16px;
        }
      }
      .con1:nth-child(2){
        padding-top:10px;
      }
    }
    img{
      cursor:pointer;
      transition:all .5s;
    }
    .headpic{
      width: 60px;
      height:60px;
      border-radius:60px
    }
    img:hover{
      transition:all .5s;
      opacity:.5;
    }
  }

  .login h6 {
    font-size 14px;
    font-weight 600;
    color:#666;
    margin: 0.05rem 0 0.6rem 0;
  }

  .btn {
    display: flex;
    justify-content: space-around;
    width: 70%;

    .btn-button {
      background-color: $mainBlue;
      color: #fff;
      font-size: 14px;
      border-radius: 2px;
      padding: 0.04rem 0.12rem;
      cursor:pointer
    }
  }
	.shandow {
  position: fixed;
  background: #0000008c;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 2;
}

.logbox {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  // justify-content: space-evenly;
  align-items: center;
  position: fixed;
  z-index: 3;
  background: #ffffff;
  width: 5.3rem;
  // height: 7.4rem;
  height: 5rem;
  // top: 15%;
  top: 10%;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 2%;

  .log-title {
    position: absolute;
    top: 0;
    width: 100%;
    height: 58px;
    line-height: 58px;
    text-align: center;
    // border-top: 4px solid $logoColor;
    // font-size: 0.25rem;
    font-size: 20px;
    color: #aaa;
    word-spacing: 0.5rem;
    position:relative
  }

  .choose {
    color: $logoColor;
    // border-bottom: 0.08rem solid $logoColor;
    border-bottom: 2px solid $logoColor;
  }

  .log-title span {
    display: inline-block;
    width: 1.2rem;
    height: 56px;
  }
  .log-title .close{
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    cursor: pointer;
  }
  #login{
    margin:60px 0;
  }
  #login>p{
    margin-top:24px
  }
  .box-main {
    text-align: center;
    font-size: 0.2rem;
    width: 4.7rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    // margin-top: 58px;
  }
  .box-main>p>img{
    width:18px;
  }
  .log-btn{
    margin-top: 10px
  }
  .box-main p {
    margin-top: 10px;
    height: 50px;
    line-height: 50px;
    // width: 4.43rem;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 2%;
    text-align: left;
    padding-left: 0.15rem;
    display: flex;
    align-items: center
  }

  .box-main p input {
    // width: 2.5rem;
    width:3rem;
    height:100%;
    font-size:16px;
    // padding-left: 0.15rem;
    margin-left:18px;
    text-indent: 10px
  }

  .a-code {
    padding-left: 0.2rem;
    font-size 16px
  }

  .log-btn {
    height: 48px;
    line-height: 48px;
    width: 4.6rem;
    border-radius: 2%;
    color: $logoColor;
    background: #404040;
    font-size: 18px;
  }

  .log-link {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 3rem;
    // padding-top: 0.3rem;
    margin-top: 10px
  }
  .log-link img{
    width:40px;
    height: 40px;
    margin-top:16px
  }

  .log-link-text {
    background: #fff;
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    width: 1rem;
    font-size: 12px;
    margin: auto;
    text-align:center;
    // padding: 0.1rem 0.28rem;
  }

  .findpass {
    width: 100%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.1rem;
    font-size 14px;
    cursor pointer
  }

  .findpass img {
    width: 0.22rem;
    height: 0.22rem;
    margin-right: 0.2rem;
  }
}

.current {
  background: #fed226;
  color: #fff !important;
}
</style>
